<template lang="pug">
	.bind-card-wrap
		.card-input-container
			input-line(leftText='就诊人' type="text" :disabled='true' ref="name")
			input-line(leftText='卡号' placeholder="请输入您的就诊卡号" type="number" @getValue="getCard" :showBorder="false")
		.card-input-container(v-if="card.length===9")
			picker(@change="changeArea" :value="index" :range="area" :range-key="'name'")
				input-line(leftText='发卡地' placeholder="请选择发卡地" type="text" :disabled='true' :showArrow="true" :showBorder="false" ref="area")
		.card-btn(@click="jumpToNext")
			main-button(text="确认添加" :isActive="nextStepPass")
</template>

<script>
import inputLine from '@/components/input-line'
import mainButton from '@/components/main-button'
export default {
	name: 'bindCard',
	data() {
		return {
			name: '',
			card: '',
			areaIndex: -1,
			area: [],
			nextStepPassCard: false,
			nextStepPassArea: false,
			idcard: '',
			memberNum: ''
		}
	},
	computed: {
		nextStepPass() {
			if (this.card.length === 9) {
				return this.nextStepPassCard && this.nextStepPassArea
			} else if (this.card.length === 20) {
				return this.nextStepPassCard
			}
		}
	},
	created() {
		this.area = [
			{
				code: '331099',
				name: '台州市'
			},
			{
				code: '331002',
				name: '椒江区'
			},
			{
				code: '331003',
				name: '黄岩区'
			},
			{
				code: '331004',
				name: '路桥区'
			},
			{
				code: '331021',
				name: '玉环市'
			},
			{
				code: '331022',
				name: '三门县'
			},
			{
				code: '331023',
				name: '天台县'
			},
			{
				code: '331024',
				name: '仙居县'
			},
			{
				code: '331081',
				name: '温岭市'
			},
			{
				code: '331082',
				name: '临海市'
			}
		]
	},
	mounted() {
		let that = this
		//this.name = this.btoa(this.$route.query.name)
		this.$refs.name.inputtext = this.name
		this.wx.getStorage({
			key: 'userInfo',
			success(res) {
				that.idcard = res.data.idcard
				that.memberNum = res.data.memberNum
			}
		})
	},
	methods: {
		jumpToNext() {
			if (this.nextStepPass) {
				this.submit()
			}
		},
		getCard(text) {
			text = text.toString()
			this.card = text
			this.nextStepPassCard = text.length === 9 || text.length === 20
		},
		changeArea(e) {
			this.areaIndex = e.mp.detail.value
			this.$refs.area.inputtext = this.area[e.mp.detail.value].name
			this.nextStepPassArea = true
		},
		submit() {
			let cardLength = this.card.length
			this.api.jtApi
				.bindCard({
					cardNumber: this.card,
					cardType: cardLength === 9 ? '2' : '1',
					bindFlag: '2',
					name: this.name,
					idcard: this.idcard,
					insured_addr: cardLength === 9 ? this.area[this.areaIndex].code : '',
					mainHealthId: this.memberNum
				})
				.then(data => {
					if (data.ret_code === '0') {
						this.wx.showToast({
							title: '添加成功！'
						})
						setTimeout(() => {
							this.$router.push({
								path: '/views/healthCard/index'
							})
						}, 1000)
					} else {
						this.wx.showToast({
							title: data.ret_info,
							icon: 'none'
						})
					}
				})
				.catch(() => {})
		}
	},
	components: {
		inputLine,
		mainButton
	}
}
</script>

<style lang="stylus">
	.bind-card-wrap
		.card-input-container
			background-color white
			margin-top mainMargin
		.card-btn
			width 690px
			height 92px
			margin 60px auto 0
			border-radius 46px
			overflow hidden
</style>
